<template>
  <h2>管理员借款列表</h2>
  借款款项名称<input type="text" v-model="state.name" />
  利息<select v-model="state.iid">
                      <option value="0">--请选择--</option>
                      <option :value="item.I_Id" v-for="item in llist">{{ item.I_Year}}年{{item.I_Interest}}%</option>
                    </select>
                    <input type="button" @click="show" value="查询" />
  <table class="table table-bordered">
      <tr align="center">
          <td><input type="checkbox"></td>
                  <td>借款项目编号</td>
                  <td>借款项目名称</td>
                  <td>借款最高金额</td>
                  <td>借款最高年限</td>
                  <td>预计月还款金额</td>
                  <td>利息值</td>
                  <td>操作</td>
      </tr>
      <tr align="center" v-for="item in list">
          <td><input type="checkbox"></td>
                  <td>{{item.B_Id}}</td>
                  <td>{{item.B_Name}}</td>
                  <td>{{item.B_Money}}</td>
                  <td>{{item.B_Year}}</td>
                  <td>{{(item.B_Money/100/12).toFixed(2)}}CNY</td>
                  <td>{{item.T_Interest.I_Interest}}</td>
                  <td><input type="button" value="用户借款明细" class="btn btn-primary" @click="borrow(item.B_Id)" /></td>
      </tr>
  </table>
  <div>
      <input type="button" value="首页" @click="page('a')" />
          <input type="button" value="上一页" @click="page('prev')" />
          <input type="button" value="下一页" @click="page('next')" />
          <input type="button" value="尾页" @click="page('b')" />
          共<span style="color: red;">{{ListCount}}</span>条数据
          每页<span style="color: red;">{{state.pageSize}}</span>条 
          当前第<span style="color: red;">{{state.pageIndex}}</span>/
          <span style="color: red;">{{PageCount}}</span>页
  </div>
  
  </template>
  
  <script setup lang="ts">
  import{reactive,ref,toRefs,onMounted} from 'vue'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  
  let router=useRouter()
  let data:any=reactive({
      list:[],
      llist:[],
      state:{
          name:'', 
          iid:'',
          pageSize:'2',
          pageIndex:'1',
      },
      ListCount:'0',
      PageCount:'0',
  })
  let {state,ListCount,PageCount,list,llist}=toRefs(data)
  onMounted(()=>{
      show();
      bang();
  })
  //绑下拉
  const bang=()=>{
      axios({
          url:"/api/Borrow/SelInterest",
          method:'get',
      })
      .then(res=>{
          console.log(res.data.data);
          llist.value=res.data.data;
      })
      .catch(err=>{
          console.log(err);   
      })
  }
  //显示
  const show=()=>{
      axios({
          url:"/api/Borrow/GetBorrowList",
          method:'get',
          params:state.value
      })
      .then(res=>{
          console.log(res.data.data)
          list.value=res.data.data;
          ListCount.value=res.data.ListCount
          PageCount.value=res.data.PageCount
      })
      .catch(err=>{
          console.log(err)
      })
  }
  //分页
  const page=(aa:any)=>{
      console.log(aa) 
      if(aa=='a')
      {
          state.value.pageIndex=1;
     }
      else if(aa=='b')
      {
          state.value.pageIndex=PageCount.value;     
      }
     else if(aa=='prev')
      {
         state.value.pageIndex--; 
      }
     else if(aa=='next')
      {
         state.value.pageIndex++; 
      }
   
      show();
  }
  //借款跳转
  const borrow=(id:any)=>{
      router.push({
          path:'/main/adminBorrow',
          query:{
              id:id
          }
      })
  }
  </script>
  
  
  
  
  
  <style scoped>
  
  </style>